<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn">
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="mobile-agent" content="">
    <meta name="applicable-device" content="pc">
    <title>歌单-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>

<link rel="stylesheet" href="static/songsList/css/layout_0412.css">
<link rel="stylesheet" href="static/songsList/css/playlist_detail_d1aad22f.css">
<link rel="stylesheet" href="static/songsList/css/popup_login.css">
<link rel="stylesheet" href="static/songsList/css/qb-ie-remind.css">
<style type="text/css">
.emojicon-m {min-height: 1em !important; min-width: 1em !important; max-height: 1em !important;max-width: 1em !important;vertical-align: middle !important;float: none !important;background-repeat:no-repeat;background-position:center center;	background-size: contain;display: inline-block;}</style>

</head>
<body class="os_mac">
    <!-- 头部 N -->
		<jsp:include page="musicTop.jsp"></jsp:include>
   	<!-- 头部 S -->


    <div class="main">

        <div class="mod_data">
            <!-- 自建歌单用a标签 -->
	    
            <span class="data__cover" id="logo">
                <img src="${music.musicListPhoto}" class="data__photo">
            </span>

            <div class="data__cont">
                <div class="data__name js_box" ><!-- 单个歌单名字 -->
                    <h1 class="data__name_txt" id="p_name_show">${music.musicListName}</h1>
                </div>
                <div class="data__singer"><!-- 单个歌手名字 -->
                    <i class="icon_singer sprite"></i><a class="data__singer_txt js_user"></a>
                </div>
                <ul class="data__info">
                    <li class="data_info__item js_box">
                        <div class="data_tag_box">
                          	  标签：<span id="choosebox1">
                            <a class="data_info__tags js_jump" >国语</a>
                            <a class="data_info__tags js_jump">中国风</a>
                            <a class="data_info__tags js_jump">伤感</a></span>
                        </div>

                    </li>
                    <!--li class="data_info__item">创建时间：2019-04-15</li-->
                    <li class="data_info__item">播放量：8.3万</li>
                <li class="data_info__item">收藏量：784</li></ul>
                
                <div class="data__actions" role="toolbar">
                    <a class="mod_btn_green js_all_play">
					<i class="mod_btn_green__icon_play"></i>播放全部</a>
                    <a class="mod_btn js_fav_taoge">
					<i class="mod_btn__icon_like"></i>收藏</a>
		    		<a class="mod_btn js_into_comment" href="#comment_box"><i class="mod_btn__icon_comment"></i>评论(7)</a>
                    <a class="mod_btn js_more"><i class="mod_btn__icon_menu"></i>更多</a>
                </div>
            </div>
        </div>

		<div class="detail_layout">
            <div class="detail_layout__main js_main">
		
                <div class="mod_songlist">
                    <ul class="songlist__header">

                        <li class="songlist__header_name">歌曲</li>
                        <li class="songlist__header_author">歌手</li>
                        <li class="songlist__header_album">专辑</li>
                        <li class="songlist__header_time">时长</li>
                    </ul> 
                    <ul class="songlist__list">
                    <!-- 0开始 -->
                   <!-- 歌曲遍历 -->
					<c:forEach items="${findmusicListName}" var="ml">
					<li>
						<div class="songlist__item">
							<div class="songlist__number">${ml.musicId }</div>
							<div class="songlist__songname">
								<span class="songlist__songname_txt">
									<a class="js_song">${ml.musicName }
									<span class="songlist__song_txt"></span>
									</a>
								</span>
								<div class="mod_list_menu">
									<a href="#" class="list_menu__item list_menu__play js_play">
										<i class="list_menu__icon_play">
										<video id="my-video" class="video-js" controls preload="auto" 
											width="100" 
											height="100">
										    <source src="${ml.musicMp3 }" type="video/mp4">
										</video>
										</i>
										<span class="icon_txt">播放</span>
									</a>
									<a class="list_menu__item list_menu__add js_fav">
										<i class="list_menu__icon_add"></i>
										<span class="icon_txt">添加到歌单</span>
									</a>
									<a class="list_menu__item list_menu__down js_down">
										<i class="list_menu__icon_down_vip"></i>
										<span class="icon_txt">VIP下载</span>
									</a>
									<a class="list_menu__item list_menu__share js_share">
										<i class="list_menu__icon_share"></i>
										<span class="icon_txt">分享</span>
									</a>
								</div>
							</div>	
					
							<div class="songlist__artist" >
								<a href="singer/list2?musicId=${ml.musicId }&singerId=${ml.singerId}" class="singer_name">${ml.singerName }</a>
							</div>
							<div class="songlist__album">
								<a href="special/list2?musicId=${ml.musicId }&specialId=${ml.specialId}" class="album_name">${ml.specialName }</a>
							</div>
							<div class="songlist__time">${ml.timeLength }</div>
						</div>			
					</li>
					</c:forEach>
					<!-- 歌曲遍历 -->
                 	</ul>
                </div>    
             </div>
            
			<div class="detail_layout__other">
                <div class="mod_about js_box" id="album_desc" style="display:;">
		    		<h3 class="about__tit">简介</h3>
                    <!-- 单个歌单简历 -->
                    	<p>${music.musicListIntro }</p>
                </div>
            </div>
		<!-- 专辑简介 -->
        </div>
    </div> 
		<!-- 尾部 N -->
			<jsp:include page="musicFoot.jsp"></jsp:include>
		<!-- 尾部 S -->
</body>
</html>